<script setup lang="tsx">
  import { useVxeFormInstance } from '/@/components/BasicVxeForm/useVxeForm';
  import { useVxeModalInner } from '@/components/BasicVxeModal/useVxeModal';
  import { doFeedbackEdit } from 'src/api/feedback';
  import { FeedbackModel } from '@/api/feedback/model';
  import { cloneDeep } from 'lodash-es';
  import useUserStore from '@/store/modules/user';

  defineEmits(['register']);
  const $modal = getCurrentInstance()?.proxy?.$modal;
  const [registerForm, { getFormData, reset, validate, clearValidate }] = useVxeFormInstance<
    Partial<FeedbackModel>
  >({
    // titleWidth: 120,
    // titleAlign: 'right',
    formData: {},

    padding: true,
    items: [
      {
        slots: {
          default: () => (
            <div m-y-20px>
              <p p-0 m-0 text="16px #333">
                为提供更好的服务，请留下您宝贵的意见和建议。
              </p>
            </div>
          ),
        },
      },
      {
        field: 'description',
        title: '',
        vertical: true,
        span: 24,
        padding: true,
        rules: [
          {
            required: true,
            content: '请输入意见或建议',
            trigger: 'change',
          },
        ],
        itemRender: {
          name: 'ElInput',
          props: {
            autosize: {
              minRows: 3,
              maxRows: 6,
            },
            placeholder: '请输入',
            type: 'textarea',
            clearable: true,
          },
        },
      },
      {
        field: 'image',
        title: '如有需要，您可以上传不超过3张图片',
        vertical: true,
        span: 24,
        itemRender: {
          name: 'ImageUpload',
          props: {
            limit: 3,
            isShowTip: false,
          },
        },
      },
    ],
  });

  const [
    registerModal,
    { closeModal, setModalProps, setModalLoading, getModalLoading, dispatchEvent },
  ] = useVxeModalInner(function (params) {
    console.log(params, '回调形参');
    nextTick(() => {
      reset();
      clearValidate();
      setModalLoading(false);
    });
  });
  const userStore = useUserStore();

  nextTick(() => {
    setModalProps({
      title: '意见反馈',
      className: 'glob-modal-vxe',
      // modelValue: true,
      width: 830,
      height: 602,
      confirmClosable: false,
      confirmButtonText: '提交',
      async onConfirm() {
        const formData = cloneDeep(getFormData() ?? {});
        formData.phone = userStore.userInfo.phonenumber;
        formData.createBy = userStore.userInfo.userId;
        formData.createName = userStore.userInfo.nickName;
        formData.terminal = 'PC';
        const list = await validate();

        if (list) {
          return;
        }
        setModalLoading();
        const data = await doFeedbackEdit(formData).finally(() => {
          setModalLoading(false);
        });
        if (data) {
          $modal?.msgSuccess('提交成功');
          closeModal();
        }
      },
    });
  });
</script>

<template>
  <BasicVxeModal @register="registerModal">
    <BasicVxeForm p-x-120px @register="registerForm" />
    <template #footer>
      <div class="flex justify-center flex-items-center h-full flex-content-center">
        <el-button
          class="w-116px !h-40px mr-20px"
          color="#165DFF"
          :loading="getModalLoading()"
          @click="dispatchEvent('confirm', {}, null)"
          >提交</el-button
        >
        <el-button class="w-116px !h-40px" @click="closeModal">取消</el-button>
      </div>
    </template>
  </BasicVxeModal>
</template>

<style lang="scss">
  .glob-modal-vxe {
    --el-fill-color-blank: #fafafa;
    --el-fill-color-lighter: #fafafa;

    //--el-fill-color-blank: #f2f3f5;
    //--el-fill-color-lighter: #f2f3f5;
    //--el-input-bg-color: #f2f3f5;
    //--el-input-border-color: rgba(0, 0, 0, 0);
  }
</style>
